<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大屏演示</title>
    <link type="text/css" rel="stylesheet" href="node_modules/normalize.css/normalize.css">
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <link type="text/css" rel="stylesheet" href="css/utils.css">
</head>
<body>
<div class="container">
    <div class="left">
        <section class="section top">
            <div class="section-inner">
                <h2 class="section-header">
                    车辆状况
                </h2>
                <div class="content">
                    <div class="charts left-top">
                        <div class="quota">
                            <dl>
                                <dt class="title txt-left">用车大户</dt>
                                <dd>
                                    <span class="color-skyblue quota-content">4584</span>
                                    <span class="unit">家</span>
                                </dd>
                            </dl>
                        </div>
                        <div class="quota">
                            <dl>
                                <dt class="title txt-left">备案车辆</dt>
                                <dd>
                                    <span class="color-skyblue quota-content">215487</span>
                                    <span class="unit">条</span>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section middle">
            <div class="section-inner">
                <h2 class="section-header">
                    用车大户
                    &ensp;&ensp;
                    <span class="color-white">4854</span>
                    家
                </h2>
                <div class="content">
                    <div class="charts-2 left-middle-top-container">
                        <div id="left-middle-top"></div>
                        <div class="legends">
                            <div class="row-2">
                                <span class="legend background-color-blue"></span>
                                <span class="color-blue width-4rem">农林牧渔</span>
                                <span class="color-blue width-4rem">36</span>
                                <span class="color-blue">36%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-skyblue"></span>
                                <span class="color-blue width-4rem">冶金矿产</span>
                                <span class="color-blue width-4rem">20</span>
                                <span class="color-blue">20%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-yellow"></span>
                                <span class="color-blue width-4rem">石油化工</span>
                                <span class="color-blue width-4rem">16</span>
                                <span class="color-blue">16%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-orange"></span>
                                <span class="color-blue width-4rem">物流运输</span>
                                <span class="color-blue width-4rem">10</span>
                                <span class="color-blue">10%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-zihong"></span>
                                <span class="color-blue width-4rem">环保绿化</span>
                                <span class="color-blue width-4rem">9</span>
                                <span class="color-blue">9%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-zi"></span>
                                <span class="color-blue width-4rem">其他</span>
                                <span class="color-blue width-4rem">9</span>
                                <span class="color-blue">9%</span>
                            </div>
                        </div>
                    </div>
                    <div class="charts-2" id="left-middle-bottom"></div>
                </div>
            </div>
        </section>
        <section class="section bottom">
            <div class="section-inner">
                <h2 class="section-header">
                    入户检验
                </h2>
                <div class="content">
                    <div class="charts-2 left-bottom-top">
                        <div class="quota">
                            <dl>
                                <dd>
                                    <span class="color-green quota-content">488</span>
                                    <span class="unit">次</span>
                                </dd>
                                <dt class="title">入户检查</dt>
                            </dl>
                        </div>
                        <div class="quota">
                            <dl>
                                <dd>
                                    <span class="color-yellow quota-content">400</span>
                                    <span class="unit">家</span>
                                </dd>
                                <dt class="title">发现问题企业</dt>
                            </dl>
                        </div>
                        <div class="quota">
                            <dl>
                                <dd>
                                    <span class="color-orange quota-content">68%</span>
                                </dd>
                                <dt class="title">检查合格率</dt>
                            </dl>
                        </div>
                    </div>
                    <div class="charts-2" id="left-bottom-bottom"></div>
                </div>
            </div>
        </section>
    </div>
    <div class="center">
        <section class="section-2 top">
            <div class="section-2-inner">
                <div class="charts" id="map"></div>
            </div>
        </section>
        <section class="section bottom">
            <div class="section-inner">
                <h2 class="section-header">
                    成都市柴油货车保有量分析
                </h2>
                <div class="content">
                    <div class="charts" id="baoyouliang"></div>
                </div>
            </div>
        </section>
    </div>
    <div class="right">
        <section class="section top">
            <div class="section-inner">
                <h2 class="section-header">
                    高排放区预警
                </h2>
                <div class="content">
                    <div class="charts right-top">
                        <div class="row">
                            <div class="col">
                                <span class="color-blue">预警类型：</span>
                                <span class="color-orange">橙色预警</span>
                            </div>
                            <div class="col">
                                <span class="color-blue">限行车辆（辆）：</span>
                                <span class="color-white limited-vehicle-count">
                                    <span class="background-color-orange">5</span>
                                    <span class="background-color-orange">8</span>
                                    <span class="background-color-orange">7</span>
                                    <span class="background-color-orange">2</span>
                                    <span class="background-color-orange">3</span>
                                </span>
                            </div>
                            <div class="col">
                                <span class="color-blue">禁行车辆：</span>
                                <span class="color-white">排放阶段国Ⅲ以前</span>
                            </div>
                            <div class="col">
                                <span class="color-blue">禁行时间：</span>
                                <span class="color-white">2019/06/15 07:00至2019/06/18 18:00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section middle">
            <div class="section-inner">
                <h2 class="section-header">
                    备案车辆
                    &ensp;&ensp;
                    <span class="color-white">215487</span>
                    辆
                </h2>
                <div class="content">
                    <div class="charts-2">
                        <div class="charts" id="right-middle-top"></div>
                    </div>
                    <div class="charts-2 right-middle-bottom-container">
                        <div id="right-middle-bottom"></div>
                        <div class="legends">
                            <div class="row-2">
                                <span class="legend background-color-blue"></span>
                                <span class="color-blue width-4rem">平板车</span>
                                <span class="color-blue width-4rem">36</span>
                                <span class="color-blue">36%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-skyblue"></span>
                                <span class="color-blue width-4rem">厢车</span>
                                <span class="color-blue width-4rem">20</span>
                                <span class="color-blue">20%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-yellow"></span>
                                <span class="color-blue width-4rem">罐车</span>
                                <span class="color-blue width-4rem">16</span>
                                <span class="color-blue">16%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-orange"></span>
                                <span class="color-blue width-4rem">槽车</span>
                                <span class="color-blue width-4rem">10</span>
                                <span class="color-blue">10%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-zihong"></span>
                                <span class="color-blue width-4rem">半挂车</span>
                                <span class="color-blue width-4rem">9</span>
                                <span class="color-blue">9%</span>
                            </div>
                            <div class="row-2">
                                <span class="legend background-color-zi"></span>
                                <span class="color-blue width-4rem">全挂车</span>
                                <span class="color-blue width-4rem">9</span>
                                <span class="color-blue">9%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section bottom">
            <div class="section-inner">
                <h2 class="section-header">
                    车辆归属地
                </h2>
                <div class="content">
                    <div class="charts right-bottom">
                        <div class="row charts">
                            <div class="col">
                                <div class="charts" id="right-bottom-left"></div>
                            </div>
                            <div class="col">
                                <div class="charts" id="right-bottom-right"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="node_modules/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="js/echarts/themes/customed.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>